<style lang="scss">
    .el-card__header{
        padding: 8px 20px;
        border-bottom: 1px solid #EBEEF5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
<template>
    <el-card class="box-card" @click="openBlog">
        <template #header>
            <div class="card-header">
                <span class="card-title">{{ content.title }}</span>
                <el-button class="button" type="text" @click="openBlog">查看文章</el-button>
            </div>
        </template>
        <div class="content" >
            <el-row >
                <el-col :span="6">
                    <el-image class="blog-img" :src="content.banner"></el-image>
                </el-col>
                <el-col :span="18">
                    <p>{{ content.summary }}</p>
                </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
                <el-col :span="8">
                    <a class="shou"><i class="el-icon-user-solid"></i>{{ content.username }}</a>
                </el-col>
                <el-col :span="4">
                    <a class="shou"><i class="el-icon-time"></i>{{ content.updateTime.substring(0,10) }}</a>
                </el-col>
                <el-col :span="4">
                    <a class="shou"><i class="el-icon-view"></i>{{ content.viewCount }}</a>
                </el-col>
                <el-col :span="4">
                    <a class="shou"><i class="el-icon-chat-square"></i>{{ content.commentCount }}</a>
                </el-col>
                <el-col :span="4">
                    <a class="shou"><i class="el-icon-star-off"></i>{{ content.favourCount }}</a>
                </el-col>
            </el-row>
        </div>

    </el-card>
</template>

<script>
export default {
    name: "ArticleCard",
    props: {
        /*博客内容*/
        content: {
            type: Object,
            default: function () {
                return {
                    id:"",
                    title: '全网最全性能优化总结！！（冰河吐血整理，建议收藏）',
                    owner: 'tangming',
                    summary: '随着互联网的高速发展，互联网行业已经从IT时代慢慢步入到DT时代。对于Java程序员的要求越来越高，只是单纯的掌握CRUD以不足以胜任互联网公司的相关职位，大量招聘岗位显示：如果是面试中高级的Java岗，基本上都需要懂性能优化的相关知识。今天，我们就一起来聊聊如何进行性能优化这个话题\n',
                    updateTime: '2021-10-22',
                    banner: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                    viewCount: 20,
                    commentCount: 20,
                    favourCount: 20
                }
            }
        }
    },
    methods: {
        openBlog() {
            const id = this.content.id;
            this.$router.push('/articles/'+id)
        }
    },
    created() {
    }
}
</script>

<style lang="scss" scoped>
.card-title {
    font-weight: bold;
    font-size: 22px;
    font-family: 微软雅黑, serif;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.box-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0.5, 0.1);
    margin: 5% 5% 5% 5%;
    border-radius: 20px;
    width: 90%;
}

.shou {
    cursor: pointer;
}

.blog-img {
    cursor: pointer;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    transition: all 0.2s linear;
    &:hover {
        transform: scale(1.4, 1.4);
        filter: contrast(120%);
    }
}


</style>